<template>
    <div id="apply">
        <div class="wrapper">
            <div class="header">
                <div class="info">
                    <div class="info-list">
                        <p>手机型号  |<span>iPhone 6S Plus</span></p>
                        <p>系统版本  |<span>11.0.2</span></p>
                    </div>
                </div>
                <img src="../images/boxshadow@3x.png" width="100%">
            </div>
            <div class="form-box">
                <div class="form__item">
                    <span class="form__key">预计回收价格</span>
                    <div class="form__value">
                        <p class="item color-orange price">¥{{info.applyAmount | toYuan}}</p>
                        <div class="arrow"></div>
                    </div>
                </div>
                <div class='price-detail'>
                    <p>
                        <span>定金</span><i>¥{{info.earnest | toYuan}}</i>
                    </p>
                    <p>
                        <span>预付款</span><i>¥{{info.advanceCharge | toYuan}}</i>
                    </p>
                    <p>
                        <span>尾款</span><i>¥{{info.finalPayment | toYuan}}</i>
                    </p>
                </div>
                <div class="form__item">
                    <span class="form__key">约定交付日</span>
                    <div class="form__value">
                        <p class="item color-orange">{{info.lendEndDate || placeholder}}</p>
                    </div>
                </div>
            </div>

            <div class="form-box">
                <div class="form__item select">
                    <span class="form__key">收款银行</span>
                    <div class="form__value" v-if='bankcardList.length && bankcard'>
                        <picker-list picker-id='bankcard' :list='bankcardList' v-model='bankcard'></picker-list>
                    </div>
                </div>
            </div>

            <div class="form__agreement">
                <check-box v-model='agreementCheck'>
                    <span class='form__agreement-text'>已阅读并同意 
                        <em v-if='info.report' @click.stop='linkJump(info.report.href)'> {{'《' + info.report.alt + '》'}} </em> 
                    </span>
                </check-box>
            </div>
            <div class="confirm">
                <span class="button" @click='apply' :class='{disabled : !agreementCheck}'>确认回收</span>
            </div>
            <p class='back' @click='goRouter("index")'>不想卖了，返回首页</p>
        </div>

        <confirm 
            :show='show_modal_location'
            @close='show_modal_location = false'
            @confirm='refresh'
            title='允许请求地理定位'
            tips='借款需同意“使用您当前位置”'></confirm>

        <agreement
            :show='showAgreement'
            type='register'
            @close='showAgreement=false'></agreement>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import agreement from '../components/Agreement.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import verificationCode from '../components/VerificationCode.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userAddCardVerifiedValidation } from '../validation/validation'
    import { getQueryString, getOS } from '../utils/utils'
    import { allApi, loanApi, userApi, lenderApi, bankcardApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            verificationCode,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            agreement,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        filters:{
            toYuan,
            dateFormat
        },
        data() {
            return {
                name:'',
                id:'',
                code:'',
                info:'',
                placeholder:'--',
                sent:false,
                agreementCheck:true,
                mode:getQueryString().mode,
                oldcard:this.$route.query.oldcard,
                card:'',
                bankcard:'',
                bankcardList:[],
                tel:'',
                showAgreement:false,
                show_modal_location:false,
                show_warning:false,
                routerName:this.$route.query.routername
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            geoLocation(){
                return this.localInfo.geoLocation
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            ageAuth(){
                let id = this.id
                let date = id.substring(6, 10) + "-" + id.substring(10, 12) + "-" + id.substring(12, 14);
                let momentDate = moment(date)
                let momentNow = moment()
                let diff = momentNow.diff(momentDate, 'years')
                
                if(diff>=18 && diff<= 55){
                    return true
                }
                return false
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'storageGeoLocation'
            ]),

            // function

            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            linkJump(link){
                location.href = link
            },
            apply(){
                allApi.log({
                    e_n:'c_loan_confirm',
                    e_v:{
                        value:this.info.applyAmount
                    }
                })
                console.log(this.geoLocation.lat)
                if(this.mode == '' && !this.geoLocation.lat){
                    this.show_modal_location = true
                    return
                }

                this.setMsgTip({
                    text:'申请借款成功！审核结果请下载app查看！',
                    type:'warn'
                })
                let timer=null;
                clearTimeout(timer)
                timer=setTimeout(function(){
                    //var ua = navigator.userAgent.toLowerCase();  
                    //alert(getOS())
                    if (getOS()== "iOS") {
                        window.location.href="https://fir.im/jddapp" 
                    } else if (getOS()== "Android") {
                        window.location.href="http://android.myapp.com/myapp/detail.htm?apkName=com.zxns.lotgold"
                    }
                },1500)
                //this.showLoading()
                /*loanApi.apply({
                    cardId:this.bankcard
                })
                .then(result=>{
                    this.setMsgTip({
                        text:'申请借款成功',
                        type:'success'
                    })
                    this.$router.push({
                        name:'check'
                    })
                    this.hideLoading()
                })
                .catch(error=>{
                    this.hideLoading()
                    console.error(error)
                })*/
            },
            getList(num){
                this.loading = true
                allApi.userList(num)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getCode(){
                if(this.sent) return
                this.sent = true

                userApi.sendSms({
                    mobile:this.tel,
                    type:'DEFAULT'
                })
                .then(result=>{

                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                })
            },
            getInfo(){
                this.showLoading()
                loanApi.info()
                .then(result=>{
                    this.hideLoading()
                    this.info = result
                    console.log(this.info)
                    this.bankcard = result.cardInfo.id
                })
                .catch(error => {
                    console.error(error+"//")
                    this.hideLoading()
                })
            },
            refresh(){
                location.reload()
            },
            getBankCard(){
                bankcardApi.list()
                .then(result=>{
                    let list = result
                    let arr = []
                    _.each(list,(val,key)=>{
                        let cardNo = val.cardNo.substr(-4)
                        let display = `${val.bankName}(${cardNo})`
                        let value = val.id
                        arr.push({
                            display:display,
                            value:value
                        })
                    })
                    this.bankcardList = arr
                })
                .catch(error => {
                    console.error(error)
                })
            },
        },
        created(){
            this.getInfo()
            this.getBankCard()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #apply{
        .header{
            background-color: #fff;
            padding: 16px 16px 0px 16px;
            .info{
                border-radius:1;
                padding-top: 8px;
                padding-bottom: 16px;
                background-color: $themeColor;
                display: flex;
                justify-content: center;
                p{
                    padding-top: 8px;
                    color:rgba(#fff,.5);
                    span{
                        padding-left: 9px;
                        color:#fff;
                    }
                }
            }
        }
        .form-box{
            margin-top: 0;
            margin-bottom: 16px;
        }
        .form__key{
            @extend %font-body1;
        }
        .form__value{
            .arrow{
                position: absolute;
                right:10px;
                bottom:0;
                &:before{
                    content:'';
                    @include triangle(16px,10px,top)
                }
            }
        }
        .price-detail{
            position: relative;
            background-color: #fff;
            padding: 14px 16px;
            &:after{
                content:'';
                position: absolute;
                bottom:0;
                left:16px;
                right:16px;
                border-top:1px solid $sectionColor;
            }
            p{
                display: flex;
                justify-content: space-between;
                align-items: center;
                @extend %font-caption;
                padding: 2px 0;
                span{
                    display: block;
                }
                i{
                    color:$importColor;
                    display: block;
                }
            }
        }
        .price{
            @extend %font-title;
        }
        .confirm{
            margin-left: 40px;
            margin-right: 40px;
        }
        .back{
            @extend %font-caption;
            text-align: center;
            color:$blue;
            margin-top: 48px;
            padding: 6px;
        }
        .tips{
            position: absolute;
            right:16px;
            bottom: 5px;
            font-size: 10px;
            color:$orange;
        }
    }

</style>
